{% extends "base.html" %}

{% block title %}{{ product.name }} - ShopEasy{% endblock %}

{% block content %}
<div class="bg-white overflow-hidden shadow rounded-lg max-w-4xl mx-auto">
    <div class="md:flex">
        <div class="md:flex-shrink-0">
            <img class="h-64 w-full object-cover md:w-64" src="{{ product.image_url }}" alt="{{ product.name }}">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold">Product</div>
            <h2 class="mt-1 text-2xl font-medium text-gray-900">{{ product.name }}</h2>
            <div class="mt-2 flex items-center">
                <p class="text-2xl text-indigo-600 font-bold">${{ "%.2f"|format(product.price) }}</p>
                <p class="ml-4 text-sm text-gray-500">
                    {% if product.stock > 0 %}
                    <span class="text-green-600">In Stock ({{ product.stock }} left)</span>
                    {% else %}
                    <span class="text-red-600">Out of Stock</span>
                    {% endif %}
                </p>
            </div>
            <div class="mt-4">
                <h3 class="text-sm font-medium text-gray-900">Description</h3>
                <p class="mt-1 text-base text-gray-600">{{ product.description }}</p>
            </div>
            <div class="mt-6">
                {% if user %}
                <form action="/cart/add/{{ product.id }}" method="post" class="flex items-center">
                    <div class="mr-4">
                        <label for="quantity" class="block text-sm font-medium text-gray-700">Quantity</label>
                        <input type="number" id="quantity" name="quantity" value="1" min="1" 
                               max="{{ product.stock }}" class="mt-1 block w-20 border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    </div>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Add to Cart
                    </button>
                </form>
                {% else %}
                <a href="/login" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Login to Add to Cart
                </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
